<%--
  Created by IntelliJ IDEA.
  User: Z-7
  Date: 2022/3/2
  Time: 13:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="modal" tabindex="-1" id="add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增商品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="goods" method="post">
                    商品名称：<input type="text" name="name"><br>
                    商品简介：<input type="text" name="title"><br>
                    图片：<input type="file" onchange="upload(this)">
                    <img src="" id="img" width="50px" height="50px">
                    <input type="hidden" name="picture">
                    <input type="hidden" name="pictureId">
                    <br>
                    图片简介：<input type="text" name="viedo"><input type="button" value="上传视频" onclick="uploadViedo()">
                    <div id="up"></div>
                    <br>
                    商品价格：<input type="text" name="price"><br>
                    上架时间：<input type="date" name="createTime"><br>
                    <div class="form-group">
                        <select multiple class="form-control" id="exampleFormControlSelect2" name="brandId">
                            <option value="">请选择品牌</option>
                        </select>
                    </div>
                    <select class="custom-select custom-select-lg mb-3" name="catId">
                        <option value="">请选择分类</option>
                    </select>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="bt">关闭</button>
                <button type="button" class="btn btn-primary" onclick="commitGoods()">保存商品</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        initBrands();
        initCats();
    })
    function commitGoods() {
        console.log($("#goods").serialize())
        $.post("${pageContext.request.contextPath}/goods/addGoods",$("#goods").serialize(),function (flag) {
            if(flag){
                alert("添加成功");
                $("#bt").click();
                enterFun("${pageContext.request.contextPath}/goods/list");
            }else{
                alert("添加失败");
            }
        })
    }
    function initBrands() {
        $.post("${pageContext.request.contextPath}/brands/getBrands",function (list) {
            for (let li of list) {
                $("[name='brandId']").append("<option value="+li.id+">"+li.brandName+"</option>");
            }
        })
    }
    function initCats() {
        $.post("${pageContext.request.contextPath}/cats/getCats",function (list) {
            for (let li of list) {
                $("[name='catId']").append("<option value="+li.id+">"+li.catName+"</option>");
            }
        })
    }
    function uploadViedo(){
        $("#up").load('/mmcrofile/toup2');
    }
    function uploadOk(fileNames){
        $("[name='viedo']").val(fileNames);
    }
    function upload(fileDom) {
        let fd = new FormData();
        fd.append("file",fileDom.files[0]);
        $.ajax({
            url:"${pageContext.request.contextPath}/file/upload",
            type:"post",
            data:fd,
            dataType:"JSON",
            processData:false,
            contentType:false,
            success:function (obj) {
                if(obj.code == "200"){
                    $("#img").prop("src","http://localhost/img/"+obj.data.path);
                    $("[name='picture']").val(obj.data.path);
                    $("[name='pictureId']").val(obj.data.id);

                }else{
                    alert(obj.errorInfo);
                }
            }
        })
    }
</script>